<template>
	<view>
		<!-- <Head :goback_custom="true" @gobackCustomMethod="$emit('closePopout', username)" >
      修改用户名
    </Head> -->
		<view class="box_title">用户名修改后，登录用户名将同步修改哦！</view>
		<view class="log_wrapper">
			<view class="field_cell_group">
				<view class="field_cell">
					<label>
						<input placeholder-style="color:#757575;font-size:14px !important;"  class="log_field" type="text" placeholder="user-363527235" v-model="username" />
					</label>
				</view>
				<view class="btn_group">
					<u-button class="btn_mb" type="primary" shape="circle" @click="handleSubmit">
						提交
					</u-button>
				</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'ResetUsername',
		props: ['username_original'],
		data() {
			return {
				username: ''
			}
		},
		methods: {
			initCB() {
				this.username = this.username_original
			},
			handleSubmit() {
				let that = this
				if (!this.username) {
					this.$refs.uTips.show({
						title: '请填写用户名',
						type: 'error'
					})
					return false
				}
				if (this.username_original == this.username) {
					this.$refs.uTips.show({
						title: '新用户名与旧用户名相同',
						type: 'error'
					})
					return false
				}
				http
					.post(api.reset_username, {
						username: this.username
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								that.$emit('closePopout', this.username)
							}, 2000)
						} 
						// else {
						// 	this.$refs.uTips.show({
						// 		title: res.data.message,
						// 		type: 'error'
						// 	})
						// }
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_title {
		font-size: 24rpx;
		color: #999999;
		width: 100%;
		background-color: #f3f3f3;
		padding: 30rpx 32rpx;
		margin-bottom: 30rpx;
	}

	.log_wrapper {
		width: 646rpx;
		margin: 0 auto;
	}

	.tx1 {
		padding: 110rpx 0 96rpx;
		font-size: 52rpx;
		color: #333333;
	}

	.field_cell {
		width: 100%;
		border-bottom: 2rpx solid #eeeeee;
		margin-bottom: 42rpx;
		position: relative;
	}

	.log_field {
		border: 0;
		width: 100%;
		height: 100%;
		color: #333333;
		font-size: 20rpx;

		&::placeholder {
			color: #c9c9c9;
		}
	}
</style>
